<template>
  <div class="tab-pane-wrapper">
    <el-form class="form-search" :model="form" inline>
      <el-form-item label="时间">
        <el-date-picker
          style="width: 400px"
          v-model="form.dateRange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          :unlink-panels="true"
          clearable
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="测点">
        <el-select
          style="width: 150px"
          clearable
          v-model="form.paramName"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, idx) in pointList"
            :label="item"
            :value="item"
            :key="idx"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <span class="fastTimeBtn" @click="fastTimeBtn(7)">近7天</span>
        <span class="fastTimeBtn" @click="fastTimeBtn(30)">近30天</span>
      </el-form-item>
      <el-form-item label="">
        <label class="btn-nav-bg stripe-btn" @click="getList">查 询</label>
        <label class="btn-nav-bg stripe-btn" @click="exportExcel">导 出</label>
      </el-form-item>
    </el-form>
    <!--    <div class="radio-box form-search">-->
    <!--      <el-radio-group v-model="paramName" @change="radioChange">-->
    <!--        <el-radio label="电压波动">电压波动分析(v)</el-radio>-->
    <!--        <el-radio label="电容容值">电容容值分析(mF)</el-radio>-->
    <!--        <el-radio label="开关频率">开关频率分析(Hz)</el-radio>-->
    <!--        <el-radio label="通信故障计数">通信故障计数分析(个/s)</el-radio>-->
    <!--      </el-radio-group>-->
    <!--    </div>-->
    <div class="chart-box">
      <linebar
        class="line-width"
        :grid="grid"
        :axisLabelColor="'rgba(198,211,236)'"
        :isLength="false"
        :datas="faultTime.data"
        :xAxis="faultTime.xAxis"
        :isShowTooltip="true"
      ></linebar>
    </div>
  </div>
</template>
<script>
import { getHistoryFamily, getXjMeasureList } from "@/api/earlyWarning";

import Linebar from "@/components/Linebar";
export default {
  name: "history",
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  components: {
    // selectCard,
    Linebar,
  },
  data() {
    return {
      form: {
        dateRange: [],
        paramName: "",
      },
      grid: {
        containLabel: true,
        left: "4%",
        top: "10%",
        right: "4%",
        bottom: "10%",
      },
      faultTime: {
        data: [
          // {
          //   type: "line",
          //   name: "AU_1",
          //   color: "#5087ec",
          //   showSymbol: true,
          //   smooth: true,
          //   data: [],
          // },
          // {
          //   type: "line",
          //   name: "AU_2",
          //   color: "#35eb68",
          //   showSymbol: true,
          //   smooth: true,
          //   data: [],
          // },
        ],
        xAxis: [],
      },
      moduleIdList: [],
      pointList: [],
    };
  },
  methods: {
    // 测点
    async getXjMeasureListData() {
      let result = await getXjMeasureList({ type: 1 });
      if (result.code == 20000) {
        this.pointList = result.data;
        try {
          if (result.data) {
            this.form.paramName = result.data[0];
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
    fastTimeBtn(dayNum) {
      this.form.dateRange = [
        this.$moment().add(-dayNum, "day").format("YYYY-MM-DD HH:mm:ss"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    init() {},
    exportExcel() {},
    radioChange() {},
    getRandomColor() {
      // 生成 0 到 255 之间的随机整数
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);

      // 将 RGB 值转换为十六进制字符串
      const toHex = (num) => {
        const hex = num.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      };

      // 返回 RGB 颜色字符串
      return `#${toHex(r)}${toHex(g)}${toHex(b)}`;

      // 使用示例
    },
    async getList() {
      let params = {
        submoduleName: [...this.moduleIdList],
        pointName: this.form.paramName,
        endDate: this.$moment(this.form.dateRange[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        startDate: this.$moment(this.form.dateRange[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        stationName: this.$store.state.stationName,
        controlName: this.$store.state.controlName,
        bridgeName: this.$store.state.bridgeName,
      };
      let result = await getHistoryFamily(params);
      if (result.code == 20000) {
        let colors = [
          "#83d3f6",
          "#FFAA00",
          "#89f480",
          "rgba(254, 0, 0, 1)",
          "#1ea9ed",
          "rgba(84, 61, 7, 1)",
          "#00FFFF",
          "#00868B",
          "#66CDAA",
          "#00FF00",
          "#B3EE3A",
          "#FFEC8B",
          "#FFFF00",
          "#8B658B",
          "#8B3A3A",
          "#8B4513",
          "#FF00FF",
          "#FF6347",
          "#104E8B",
        ];
        this.faultTime.data = [];
        (this.faultTime.xAxis = result.data[0].data.map((ele) => ele.time)),
          result.data.forEach((item, index) => {
            this.faultTime.data.push({
              type: "line",
              name: item.modelName,
              color:
                index < colors.length ? colors[index] : this.getRandomColor(),
              showSymbol: true,
              smooth: true,
              data: item.data.map((ele) => ele.value),
            });
            // if (item.modelName == 1) {
            //   this.faultTime.data[0].data = item.data.map((i) => {
            //     return i.value;
            //   });
            //   this.faultTime.xAxis = item.data.map((i) => {
            //     return i.time;
            //   });
            // } else if (item.modelName == 2) {
            //   this.faultTime.data[1].data = item.data.map((i) => {
            //     return i.value;
            //   });
            //   this.faultTime.xAxis = item.data.map((i) => {
            //     return i.time;
            //   });
            // }
          });
      }
    },
  },
  created() {
    this.getXjMeasureListData();
    this.form.dateRange = [
      this.$moment()
        .add(-1, "month")
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"),
      this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.$bus.$on("sonModule", (arr) => {
      this.moduleIdList = JSON.parse(arr);
      this.getList();
    });
  },
  mounted() {},
  updated() {},
};
</script>
<style scoped lang="less">
.tab-pane-wrapper {
  height: 100%;
  width: calc(100% - 380px);
  margin-left: 380px;
  padding: 20px;
  background-color: #202f3e;
  display: flex;
  flex-direction: column;
  .form-search {
    margin-bottom: 16px;
    .fastTimeBtn {
      color: #c6d3ec;
      font-size: 16px;
      font-weight: 500;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .radio-box {
    display: flex;
    justify-content: flex-end;
    .el-radio-group {
      width: auto;
      padding: 0 20px;
    }
  }
  .chart-box {
    width: 100%;
    flex: 1;
    .line-width {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
